<template>
    <h3>成绩列表</h3>
   <!-- 表格 -->
   <div class="score-list">
       <el-table :data="tableData" stripe style="width: 100%">
           <el-table-column prop="index" label="序号" width="70" />
           <el-table-column prop="name" label="试卷名称" width="180" />
           <el-table-column prop="account" label="账号" width="200" />
           <el-table-column prop="nickName" label="昵称" width="80" />
           <el-table-column prop="score" label="成绩" width="100" />
           <el-table-column prop="right2" label="答对" width="100" />
           <el-table-column prop="wrong" label="答错" width="100" />
           <el-table-column prop="createAt" label="考试时间（时间戳）" width="180" />
           <el-table-column label="操作">
               <template #default="scope">
                   <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                       删除
                   </el-button>
               </template>
           </el-table-column>
       </el-table>
   </div>
   <!-- 分页器 -->
   <div class="page">
       <!-- layout="prev, pager, next" -->
           <el-pagination
           :page-size="pageSize"
           :pager-count="pageSize"
           :total="totalNum"
           @change="changePageFn"
       />
       </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api/http'
// 表格数据
const tableData = ref<any>([])
let page = ref<number>(1);//默认第一页
let pageSize = ref<number>(11);//数量
let totalNum = ref<number>(50)

// 点击删除成绩
const handleDelete = (index: number, row: any) => {
   // console.log(index, row)
    // console.log(index, row)
   // 获取当前点击的选项
   let { tid } = row;
   ElMessageBox.confirm(
       `是否删除这个成绩?`,
       '提示',
       {
           distinguishCancelAndClose: true,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
       }
   )
       .then(async () => {
           // console.log("点击确定")
           // 删除成绩
           await api.scoreRemove({ tid })
               .then(
                   content => {
                       let { code, msg } = content;
                       if (code != 200) {
                           ElMessage.error(msg)
                       }
                   }
               )
           // 删除程序中数组对应的数据
           tableData.value.splice(index, 1);
       })
       .catch(( ) => {
           // console.log("点击取消")
       })
}

// 点击分页
const changePageFn = (value: number)=> {
   // console.log({value})
   page.value = value;
   // 获取第几页的成绩列表
   scoreItemFn(page.value,pageSize.value);
}

// 获取成绩列表
const scoreItemFn = async (page: number, pageSize: number)=> {
   await api.scoreItems({page,pageSize})
   .then(
       content=>{
           // console.log(content);//后台响应的数据
           let {code , result, total} = content;
           if(code == 200) {
               // 整合数据完成
               let newArr=  result.map((item: any,i: number)=> {
                   item.index = i + 1;
                   return item
               })
               // 进行这样的赋值，页面就可以做出变化（别忘了，vue是数据双向绑定）
               tableData.value = newArr;
               totalNum.value = total;
           }
       }
   )
}

// 初始化获取成绩
scoreItemFn(page.value,pageSize.value)

</script>

<style lang="scss">
.score-list {
   margin-top: 15px;
}
.page {
   margin-top: 15px
}
</style>